<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const selectMenu = (index: string) => {
  router.push({
    path: index
  });
};
</script>

<template>
  <div id="main">
    <el-container>
      <el-header class="test-header">
        <img
            style="width: 50px"
            src="/favicon.ico"
            alt="Element logo"
        />
      </el-header>
      <el-container style="height: calc(100vh - 100px)">
        <el-aside width="200px" height="100vh">
          <el-menu
              default-active="/user"
              class="el-menu-vertical-demo"
              @select="selectMenu"
          >
            <el-menu-item index="/user">
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/role">
              <span>角色管理</span>
            </el-menu-item>
            <el-menu-item index="/organization">
              <span>组织管理</span>
            </el-menu-item>
            <el-menu-item index="/free/monitor">
              <span>游离用户监控</span>
            </el-menu-item>
            <el-menu-item index="/effect">
              <span>权限注册</span>
            </el-menu-item>
            <el-menu-item index="/tourist">
              <span>游客管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="slot-main">
          <slot></slot>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
  .el-menu-vertical-demo {
    min-height: calc(100vh - 100px);
  }
  .test-header {
    background-color: skyblue;
  }
  .slot-main {
    padding: 8px 24px;
  }
</style>
